import React, { ReactNode, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Input, Affix } from 'antd';
import Nav from './Nav';
import NavUser from './NavUser';

import classnames from 'classnames';
import classNames from 'classnames';

const { Search } = Input;

interface HeaderProps {
    type?: string;
    affixed?: boolean;
    [key: string]: any;
    children?: ReactNode;
}

const Header: React.FC<HeaderProps> = (props) => {
    const [affixed, setAffix] = useState<boolean | undefined>(props.affixed);
    const navigate = useNavigate();
    const onSearch = (value: string) => {
        navigate('/video/search')
    }
    const onChange = (affixed?: boolean) => {
        if (props.affixed) return;
        setAffix(affixed)
    }
    return (
        <div className={classNames({
            'video-header': true,
            ['video-' + props.type]: true,
        })}>
            {/* 顶部导航 */}
            <Affix onChange={onChange}>
                <div className={classnames({
                    'header-nav': true,
                    'affixed': affixed
                })}>
                    <div className="nav-link">
                        <Nav />
                    </div>
                    <div className="nav-search" >
                        <Search placeholder="卷者大陆" onSearch={onSearch} style={{ width: "100%", minWidth: 200 }} />
                    </div>
                    <div className="nav-user">
                        <NavUser />
                    </div>
                </div>
            </Affix>
        </div>
    )
}

Header.defaultProps = {
    type: 'home-header',
    affixed: false,
}

export default Header;
